import React, { Component } from 'react';
import { Card, Form, Input, Button, message, Icon, Checkbox, Layout } from 'antd';
import {connect} from 'react-redux';
import MainHeader from '../../components/header';
// import {login} from "../../services/common_services";
import {Storage} from "../../util";
import * as actionCreators from "../../components/auth/store/actions";

const { Item } = Form;

class LoginPage extends Component {
  render() {
    const { getFieldDecorator } = this.props.form;
    return (
      <Layout className="pinlor-common-wrapper">
        <MainHeader />
        <div className="pinlor-common-content">
          <Card title="行内登录表单" className="pinlor-cards">
            <Form layout="inline">
              <Item>
                <Input placeholder="请输入用户名" />
              </Item>
              <Item>
                <Input placeholder="请输入密码" />
              </Item>
              <Item>
                <Button type="primary">登录</Button>
              </Item>
            </Form>
          </Card>
          <Card title="水平登录表单" className="pinlor-cards pinlor-buttons">
            <Form style={{ width: 300 }}>
              <Item>
                {
                  getFieldDecorator('userName', {
                    initialValue: '',
                    rules: [
                      {
                        required: true,
                        message: '用户名不能为空'
                      },
                      {
                        min: 2,
                        max: 10,
                        message: '长度不在范围内'
                      },
                      {
                        pattern: /^\w+$/g,
                        message: '用户名必须是字母或数字'
                      }
                    ]
                  })(<Input prefix={<Icon type="user" />} placeholder="请输入用户名" />)
                }
              </Item>
              <Item>
                {
                  getFieldDecorator('userPwd', {
                    initialValue: '',
                    rules: []
                  })(<Input prefix={<Icon type="lock" />} type="password" placeholder="请输入密码" />)
                }
              </Item>
              <Item>
                {
                  getFieldDecorator('remember', {
                    valuePropName: 'checked',
                    initialValue: true,
                  })(<Checkbox>记住密码</Checkbox>)
                }
                <a href="###" style={{ float: 'right' }}>忘记密码</a>
              </Item>
              <Item>
                <Button type="primary" onClick={this.handleSubmit}>登录</Button>
                <Button type="primary" onClick={this.toRegister}>注册</Button>
              </Item>
            </Form>
          </Card>
        </div>
      </Layout>
    );
  }

  handleSubmit = () => {
    const {pathname, form} = this.props;
    const { getFieldsValue, validateFields } = form;
    const userInfo = getFieldsValue();
    validateFields((err) => {
      if (!err) {
        const { userName, userPwd, remember } = userInfo;
        message.success(`${userName} 恭喜你，通过验证，当前密码为${userPwd}，是否记住密码${remember}`);

        this.props.setLoginStatus(true);
        Storage.setKey('token', 1234);
        this.props.history.push({pathname: pathname || '/'});
        /*login({
          userName,
          userPwd,
          remember
        }).then(res=>{
          const token = res.token;
          if(token){
            console.log(pathname)
            this.props.setLoginStatus(true);
            Storage.setKey('token', res.token);
            this.props.history.push({pathname: pathname || '/'});
          }
        })*/

      }
    });
  };

  toRegister = ()=>{
    this.props.history.push('/reg');
  }
}

const mapStateToProps = state=>({
  pathname: state.auth.pathname
});

const mapDispatchToProps = dispatch => ({
  setLoginStatus(status){
    dispatch(actionCreators.setLoginStatus(status))
  }
});

export default connect(mapStateToProps, mapDispatchToProps)(Form.create()(LoginPage));
